liankao/src/pages/ksfx/cjfx_slyf/[ykj_id].vue

<template>
  <div class="cjfx_slyf">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px">
        <leftSider :ykjId="ykjId" :activeIndex="activeIndex"  @parentClick="parentClick"/>
      </div>

      <div class="w-1012px p-4 overflow-visible blueBg">

        <div class="flex items-center">
          <optionSelect  @optionClick="optionClick" />
        </div>
        <div class="w-270px  searchBtn" @click="handleSearch">
          <el-input v-model="searchVal" class="w-50 mt-2 h-auto" placeholder="请输入搜索内容" />
          <div class="w-26px h-26px rounded searchBtnIcon">
            <img src="/images/searchBtnIcon.png" alt="">
          </div>
        </div>
        <div class="flex justify-between mt-4 exportBtn">
          <div>
            <el-button color="#003eee" type="primary" size="large" @click="restBtn">重置</el-button>
            <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
          </div>
          <div>
            <el-button color="#003eee" type="primary" size="large" @click="openDialog">校三率一分</el-button>
          </div>
        </div>

        <div class="h-auto mt-9px listMain">

          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="xx" label="学校" show-overflow-tooltip width="200" />
            <el-table-column prop="bj" label="班级" width="120" />
            <el-table-column prop="pm" label="排名" />
            <el-table-column prop="pjf" label="平均分" />
            <el-table-column prop="ykrs" label="应考人数" />
            <el-table-column prop="skrs" label="实考人数" />
            <el-table-column prop="zgf" label="最高分" />
            <el-table-column prop="yxrs" label="优秀人数" />
            <el-table-column prop="yxl" label="优秀率" />
            <el-table-column prop="jgrs" label="及格人数" />
            <el-table-column prop="jgl" label="及格率" />
            <el-table-column prop="dfrs" label="低分人数" />
            <el-table-column prop="dfl" label="低分率" />
            <el-table-column prop="nd" label="难度" />
            <el-table-column prop="qfd" label="区分度" />
            <el-table-column prop="bzc" label="标椎差" />
          </el-table>

          <div class="mt-4" >
            <el-pagination background layout="prev, pager, next " :total="totalPage" style="justify-content: right;" />
            </div>

        </div>

      </div>

      <!-- dialog  -->
      <el-dialog v-model="dialogTableVisible" title="校三率一分" style="width: 90%;">
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column prop="xx" label="学校" show-overflow-tooltip />
            <el-table-column prop="ksrs" label="考试人数"/>
            <el-table-column prop="skrs" label="实考人数"/>
            <el-table-column prop="zgf" label="最高分"/>
            <el-table-column prop="pjf" label="平均分"/>
            <el-table-column prop="pjfpm" label="平均分排名"/>
            <el-table-column prop="pjfdf" label="平均分（得分）"/>
            <el-table-column prop="yxl" label="优秀率"/>
            <el-table-column prop="yxlpm" label="优秀率排名"/>
            <el-table-column prop="yxldf" label="优秀率得分（30%）"/>
            <el-table-column prop="jgl" label="及格率"/>
            <el-table-column prop="jglpm" label="及格率排名"/>
            <el-table-column prop="jgldf" label="及格率得分（30%）"/>
            <el-table-column prop="dfrs" label="低分人数"/>
            <el-table-column prop="dfl" label="低分率"/>
            <el-table-column prop="zdf" label="总得分（100）"/>
            <el-table-column prop="zpm" label="总排名"/>
            <el-table-column prop="nd" label="难度"/>
            <el-table-column prop="qfd" label="区分度"/>
            <el-table-column prop="bzc" label="标准差 "/>
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" color="#003eee" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>


    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {cjfx_slyf_list } from '../apiItem';
const route = useRoute();
import {user} from "~/store";

// 侧边栏点击
const activeIndex =ref('1-2');
const ykjId = ref();
const parentClick = (val) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}

const searchVal = ref();


const tableData = ref([]);
const totalPage = ref();
const pageNum = ref(0);
ykjId.value = route.params.ykj_id;

onMounted(() => {
  initData()
})

const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");

const initData =() => {
  let transObj = {
    school_id:school_id.value,
    cm_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id: route.params.ykj_id,
    yscjd_rkjs: user.value.user_id,
    keyword:searchVal.value,
    page: pageNum.value,
    limit:10,
  }
  cjfx_slyf_list(transObj)
    .then(res => {
      if (res.code == "1") {
        tableData.value = res.data.tableData;
        totalPage.value = res.data.tableData.length;
      }
    })
  .catch(error=>{console.log(error)})
}

//option筛选
const optionClick = (val: any, marke: any) => {
  if (marke == "scholl") {
    school_id.value = val;
  } else if (marke == "grade") {
    grade_id.value = val;
  } else {
    xueke_id.value = val;
  }
  initData();
}
//搜索
const handleSearch = () => {
  initData();
}
//重置
const restBtn = () => {
  school_id.value = '';
  grade_id.value ='';
  xueke_id.value = '';
  initData();
}
//导出
const exportBtn = () => {
  let prefixedUrl = window.GLOBAL_CONFIG.web_pc;
  let fullUrl = prefixedUrl + '/openapi/echart/sfyl_data.php?api=xls&token=' + user.value.token;
  window.open(fullUrl,'_blank')
}

//弹出框
const dialogTableVisible = ref(false)
const openDialog = () => {
  dialogTableVisible.value = true;
}

</script>


<style lang="scss" scoped>

:deep(.el-input__wrapper) {
  height:40px;
}
:deep(.el-sub-menu__title)  {
  background: #003eee;
  color: #fff;
}
:deep(.el-table__header thead tr th) {
  background: #003eee!important;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-weight: normal;
}
:deep(.el-table__header thead tr th:first-child) {
  border-top-left-radius: 9px;
}
:deep(.el-table__body tbody .el-table__row td) {
  background-color: transparent;
}
:deep(.el-dialog__footer) {
  text-align: center;
}
.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.listMain {
  min-height: 200px;
  max-height: 600px;
  overflow-y: auto;
}

.listMain_title {
  font-size: 14px;
  color: #fff;
  background: #003eee;
  overflow-y: auto;
}

.singleT {
  flex: 1;
  line-height: 50px;
  width: fit-content;
  text-align: center;
}

.singleD {
  flex: 1;
}

.singleTSec {
  width: fit-content;
  flex: 1;
  line-height: 60px;
  text-align: center;
}

.searchBtn{
  position:relative;
}
.searchBtnIcon{
  background-color: #0040EE;
  position:absolute;
  right:2%;
  top:50%;
  z-index:12;
  transform: translate(0,-9px);
  text-align:center;
  cursor: pointer;
}
.searchBtnIcon img{
  width:60%;
  height:60%;
  display:inline-block;
}

</style>